<template>
  <div class="base-upload">
    <!-- <el-form label-position="right"> -->
    <el-row>
      <!-- <el-form-item> -->
        <!-- <el-button type="success" ></el-button> -->

        
      <!-- </el-form-item> -->
      <div class="img-wrap">
        <el-image
          style="width: 100px; height: 100px"
          fit="cover"
          v-for="(item,index) of preConfirmation"
          :key="index"
          :src="item"
          :preview-src-list="preConfirmation"
        ></el-image>
        <div class="btn" @click="confirmationUpload = true">
          <div class="el-icon-plus"></div>
          <span>上传图片</span>
        </div>
      </div>
      <slot></slot>
    </el-row>
    <!-- </el-form> -->
    <!-- 说明文件上传对话框 -->
    <el-dialog title="上传说明文件" :visible.sync="explainUpload" center>
      <!-- <span>需要注意的是内容是默认不居中的</span> -->
      <!-- 选择图片 -->
      <el-upload
        action="#"
        list-type="picture-card"
        :auto-upload="false"
        :file-list="explainPics"
        :on-change="addExplain"
        :limit="5"
        :on-exceed="exceesLimitExplain"
        multiple
        drap
      >
        <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
        <i slot="default" class="el-icon-plus"></i>
        <div slot="file" slot-scope="{file}">
          <img class="el-upload-list__item-thumbnail" :src="file.url" alt />
          <span class="el-upload-list__item-actions">
            <span class="el-upload-list__item-delete" @click="removeExplain(file)">
              <i class="el-icon-delete"></i>
            </span>
          </span>
        </div>
      </el-upload>
      <span slot="footer" class="dialog-footer">
        <el-button @click="explainUpload = false">取 消</el-button>
        <el-button type="primary" @click="submit">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 确认书上传对话框 -->
    <el-dialog title="上传确认文件" :visible.sync="confirmationUpload" center>
      <!-- <span>需要注意的是内容是默认不居中的</span> -->
      <!-- 选择图片 -->
      <el-upload
        action="#"
        list-type="picture-card"
        :auto-upload="false"
        :file-list="confirmationPics"
        :on-change="addConfirmation"
        :limit="1"
        :on-exceed="exceesLimitConfirmation"
        multiple
        drap
      >
        <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
        <i slot="default" class="el-icon-plus"></i>
        <div slot="file" slot-scope="{file}">
          <img class="el-upload-list__item-thumbnail" :src="file.url" alt />
          <span class="el-upload-list__item-actions">
            <span class="el-upload-list__item-delete" @click="removeConfirmation(file)">
              <i class="el-icon-delete"></i>
            </span>
          </span>
        </div>
      </el-upload>
      <span slot="footer" class="dialog-footer">
        <el-button @click="confirmationUpload = false">取 消</el-button>
        <el-button type="primary" @click="submit">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
export default {
  data() {
    return {
      explainUpload: false,
      confirmationUpload: false,
      explainPics: [],
      confirmationPics: [],
    };
  },
  methods: {
    //   添加文件
    addExplain(file, files) {
      this.explainPics = files;
    },
    // 删除文件
    removeExplain(file) {
      var index = this.explainPics.findIndex(el => el.uid === file.uid);
      if (index > -1) {
        this.explainPics.splice(index, 1);
      }
    },
    // 文件数量超出
    exceesLimitExplain() {
      this.$message({
        showClose: true,
        message: "超过最大上传数量",
        type: "warning"
      });
    },
    // 添加确认书
    addConfirmation(file, files) {
      this.confirmationPics = files;
    },
    // 删除确认书
    removeConfirmation(file) {
      var index = this.confirmationPics.findIndex(el => el.uid === file.uid);
      if (index > -1) {
        this.confirmationPics.splice(index, 1);
      }
    },
    // 确认书超出
    exceesLimitConfirmation() {
      this.$message({
        showClose: true,
        message: "超过最大上传数量",
        type: "warning"
      });
    },
    // 提交确认书图片
    submit() {
      var explain = this.explainPics.map(el => el.raw);
      var confirmation = this.confirmationPics.map(el => el.raw);
      this.$emit("getFile", explain, confirmation);
      this.explainUpload = false;
      this.confirmationUpload = false;
    }
  },

  computed: {
    // 预览图
    preConfirmation() {
      // if(this.$store.state)

      let imgArr = this.confirmationPics.map(el => el.url);
      ////console.log(imgArr,55);
      if(imgArr ==false){
        ////console.log(this.imgPreview);
        if(!this.imgPreview) return [];
        let imgArrs = [this.imgPreview]
        ////console.log(imgArrs);
        return imgArrs
      }
      return imgArr
    }
  },
  props:{
    imgPreview:{
      type:String,
      default:''
    }
  },
};
</script>
<style lang="less" scoped>
.btn{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 110px;
  height: 110px;
  background-color: #fafafa;
  border: 0.5px dashed #707070;
  border-radius: 4px;
  cursor:pointer;
        .el-icon-plus {
          font-size: 16px;
          color: #d9d9d9;
        }
  span{
    font-size: 12px;
    color: #A9A9A9;
  }
}
.base-upload {

  .el-upload-list__item > div {
    height: 100%;
    img {
      object-fit: cover;
      object-position: center;
    }

  }
  .dialog-footer{
    display: flex;
    justify-content: space-between;
    .el-button{
        background-color:#409EFF !important;
        border-color:#409EFF !important;
        color: #ffffff;
      }
  }

  .el-form-item {
    margin-bottom: 5px;
    
    .el-form-item__label{
      width: 150px !important;

    }

  }
  .img-wrap {
    display: flex;
    justify-content: flex-start;
    .el-image {
      margin-right: 5px;
      width: 110px !important;
      height: 110px !important;
    }
 
  }
 
   
}

</style>